<template>
	<view>
		<view id="head">
			<img :src="url" />
			<view id="create">
				<view>{{title}}</view>
				<view>{{createTime}}</view>
			</view>
			<view id="title">
				<a v-if="entrance" id="apply" :href="entrance" target="_blank">申请入口</a>
			</view>
		</view>

		<div class="ql-container ql-snow">
			<div class="ql-editor">
				<div v-if="content" v-html="content"></div>
			</div>
		</div>
		<!-- <rich-text :nodes="content"></rich-text> -->
	</view>
</template>

<script>
	import {
		info
	} from '@/api/source'

	export default {
		data() {
			return {
				url: '',
				title: '',
				content: '',

				createBy: '',
				createTime: '',
				entrance: null
			}
		},
		onLoad(option) {
			if (option.id) {
				info(option.id).then(res => {
					console.log(res)

					let data = res.data
					this.url = data.img
					this.title = data.title

					this.content = data.content
					this.entrance = data.entrance
					this.createTime = data.createTime
				}).catch(e => {
					this.$modal.msgLoading('暂无')
				})
			} else {
				this.$modal.msgLoading('非法访问')
			}
		}
	}
</script>
<style lang="scss">
	@import '@/static/scss/quill.snow.css';
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	#head {
		font-size: 14px;
		display: flex;
		padding: 4px;
		background-color: aliceblue;

		img {
			width: 12vw;
			height: 12vw;
			padding: 2px;
			border-radius: 4px;
		}

		#create {
			width: 60vw;
			margin-left: 6px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		#title {
			display: flex;
			flex-direction: column;
			justify-content: center;


			#apply {
				padding: 8px 16px;
				background-color: #7b99ff;
				border-radius: 4px;
				color: #fff;
			}
		}
	}

</style>